<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>WebHDFS Login</title>
    <link rel="ICON" href="img/icon.png">
    <!-- Vendor CSS -->
    <link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
    <link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="css/sweetalert.css">
    <!-- CSS -->
    <link href="css/app.min.1.css" rel="stylesheet">
    <link href="css/app.min.2.css" rel="stylesheet">

</head>

<body class="login-content">
<!-- register -->
<form th:action="@{/user_register}" class="lc-block toggled" id="l-register" method="post">
    <!-- Register -->
    <h1 class="lean">注册</h1>
    <div class="input-group m-b-20">
        <span class="input-group-addon">
            <i class="zmdi zmdi-account"></i>
        </span>
        <div class="fg-line">
            <input type="text" class="form-control" name="username" placeholder="请输入用户名(账号即用户名,长度为3-8位)..." autocomplete="false" regex="^\w{3,16}$" onblur="validate_username();" onfocus='$("#username_validate").hide();'/>
            <i id="username_validate" class="fa fa-check-square fa-lg" style="color: lightgreen;line-height: 35px"></i>
        </div>
    </div>

    <div class="input-group m-b-20">
        <span class="input-group-addon">
            <i class="zmdi zmdi-email"></i>
        </span>
        <div class="fg-line">
            <input type="text" class="form-control" name="email" placeholder="请输入邮箱地址..." autocomplete="false" regex="^\w+@\w+\.[a-zA-Z]+(\.[a-zA-Z]+)?$" onblur="validate_email();" onfocus='$("#email_validate").hide();'/>
            <i id="email_validate" class="fa fa-check-square fa-lg" style="color: lightgreen;line-height: 35px"></i>
        </div>
    </div>

    <div class="input-group m-b-20">
        <span class="input-group-addon">
            <i class="zmdi zmdi-key"></i>
        </span>
        <div class="fg-line">
            <input type="password" class="form-control" name="password" placeholder="请输入密码(8-16位)..." autocomplete="false" regex="^\w+" onblur="checkPasswordEqual();" onfocus='$("#password_validate").hide();$("#password_1_validate").hide();'/>
            <i id="password_validate" class="fa fa-check-square fa-lg" style="color: lightgreen;line-height: 35px"></i>
        </div>
    </div>

    <div class="input-group m-b-20">
        <span class="input-group-addon">
            <i class="zmdi zmdi-key"></i>
        </span>
        <div class="fg-line">
            <input type="password" class="form-control" name="password_1" placeholder="请再次输入密码(8-16位)..." autocomplete="false" regex="^\w+" onblur="checkPasswordEqual();" onfocus='$("#password_validate").hide();$("#password_1_validate").hide();'/>
            <i id="password_1_validate" class="fa fa-check-square fa-lg" style="color: lightgreen;line-height: 35px"></i>
        </div>
    </div>

    <div class="clearfix"></div>

    <button type="button" title="注册" class="btn btn-login btn-danger btn-float" onclick="userRegister();"><i class="zmdi zmdi-arrow-forward"></i></button>

    <ul class="login-navigation">
        <li class="bgm-green">用户登录页面</li>
    </ul>
</form>




<!-- Older IE warning message -->
<!--[if lt IE 9]>
<div class="ie-warning">
    <h1 class="c-white">Warning!!</h1>
    <p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
    <div class="iew-container">
        <ul class="iew-download">
            <li>
                <a href="http://www.google.com/chrome/">
                    <img src="img/browsers/chrome.png" alt="">
                    <div>Chrome</div>
                </a>
            </li>
            <li>
                <a href="https://www.mozilla.org/en-US/firefox/new/">
                    <img src="img/browsers/firefox.png" alt="">
                    <div>Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.opera.com">
                    <img src="img/browsers/opera.png" alt="">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/safari/">
                    <img src="img/browsers/safari.png" alt="">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
                    <img src="img/browsers/ie.png" alt="">
                    <div>IE (New)</div>
                </a>
            </li>
        </ul>
    </div>
    <p>Sorry for the inconvenience!</p>
</div>
<![endif]-->

<!-- Javascript Libraries -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="vendors/bower_components/Waves/dist/waves.min.js"></script>

<script src="js/sweetalert.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->

<script>
    $(function(){

        //hide icon
        $("#username_validate").hide();
        $("#email_validate").hide();
        $("#password_validate").hide();
        $("#password_1_validate").hide();

        /*
         * Login
         */
        if ($('.login-content')[0]) {
            //Add class to HTML. This is used to center align the logn box
            $('html').addClass('login-content');

            $('body').on('click', '.login-navigation > li', function(){
                var z = $(this).data('block');
                var t = $(this).closest('.lc-block');

                t.removeClass('toggled');
                window.location.href="./adminLogin";

                setTimeout(function(){
                    $(z).addClass('toggled');
                });
            })
        }
    });

    //验证用户名是否存在
    function validate_username() {
        var account = $("input[name='username']").val();
        if (account === "" || (account.length < 3 || account.length > 8)){
            alert("请输入正确的用户名!");
            $("#username_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
        }
        else {
            $.ajax({
                type: "POST",
                url: "./validateUser",
                dataType: 'json',
                data: {"account" : account},
                success: function (data) {
                    console.log(data);
                    if (Boolean(data)){
                        $("#username_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
                        alert("存在已注册的用户名!");
                    }
                    else {
                        $("#username_validate").removeClass("fa-window-close").addClass("fa-check-square").removeAttr("style").css("color", "lightgreen").css("line-height", "35px");
                    }
                }
            })
        }
    }

    //验证用户邮箱是否存在
    function validate_email() {
        var userEmail = $("input[name='email']").val();
        if (userEmail === ""){
            $("#email_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
        }
        else{
            var emailAddressRegex = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!emailAddressRegex.test(userEmail)) alert("请输入正确的邮箱地址!");
            else {
                $.ajax({
                    type: "POST",
                    url: "./validateEmail",
                    dataType: 'json',
                    data: {"emailAddr" : userEmail},
                    success: function (data) {
                        console.log(data);
                        if (Boolean(data)){
                            $("#email_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
                            alert("存在已注册的邮箱!");
                        }
                        else {
                            $("#email_validate").removeClass("fa-window-close").addClass("fa-check-square").removeAttr("style").css("color", "lightgreen").css("line-height", "35px");
                        }
                    }
                })
            }

        }
    }

    //验证两次密码是否一致
    function checkPasswordEqual(){
        var password = $("input[name='password']").val();
        var password_1 = $("input[name='password_1']").val();
        if (password !== "" && password_1 !== ""){
            if (password_1 !== password){
                $("#password_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
                $("#password_1_validate").removeClass("fa-check-square").addClass("fa-window-close").removeAttr("style").css("color", "red").css("line-height", "35px");
            }
            else
            {
                $("#password_validate").removeClass("fa-window-close").addClass("fa-check-square").removeAttr("style").css("color", "lightgreen").css("line-height", "35px").show();
                $("#password_1_validate").removeClass("fa-window-close").addClass("fa-check-square").removeAttr("style").css("color", "lightgreen").css("line-height", "35px").show();
            }
        }
    }

    //注册
    function userRegister(){
        var pattern = new RegExp("fa-window-close");
        var a = $("#username_validate").attr("class").toString().split(" ");
        var b = $("#email_validate").attr("class").toString().split(" ");

        var account = $("input[name='username']").val();
        var emailAddr = $("input[name='email']").val();
        var password = $("input[name='password']").val();
        var password_1 = $("input[name='password_1']").val();

        if (pattern.test(a.pop()) && pattern.test(b.pop())) alert("用户名和邮箱无法注册!");
        else if (account === "" && emailAddr === "" && password === "" && password_1 === "") alert("信息不能为空!");
        else if (account.length < 3 || account.length > 8) alert("用户名格式不对!");
        else if (password === "") alert("密码为空!");
        else if (password_1 === "") alert("密码为空!");
        else if (password !== "" && password_1 !== "") if (password !== password_1) alert("两次密码不同!");
        else if (password.length < 8 || password.length > 16) alert("请输入正确的密码!");
        else {
            console.log($("#l-register").serialize());
            $.ajax({
                type:'POST',
                url:'./user_register',
                dataType: 'text',
                data: $("#l-register").serialize(),
                success: function (data, textStatus, request) {
                    console.log("data: "+ data);
                    console.log(textStatus);
                    console.log(request);
                    if (Boolean(data)){
                        success_result("注册");
                    }
                    else {
                        fail_result("注册", function () {});
                    }
                }
            })
        }
    }

    //提交注册返回的结果（成功）
    function success_result(operation_name, fn) {
        swal({
            title: operation_name + "成功!",
            text: "立刻前往登录页面",
            type: "success",
            confirmButtonText: "跳转"
        }, function (bool) {
            if(bool){
                window.location.href="./adminLogin";
            }
        })
    }

    //提交注册返回的结果（失败）
    function fail_result(operation_name, fn) {
        swal({
            title: operation_name + "失败！",
            text: "请重新注册",
            type: "error",
            confirmButtonText: "确定"
        }, function(bool) {
            fn();
        });
    }


</script>

</body>
</html>